<template>  
	<view>
		<view class="topic-list" v-for="(item, index) in topicList" :key="index">
			<view class="topic-item u-padding-30">
				<!--用户信息-->
				<view class="topic-item-user u-flex">
					<u-avatar :src="item.avatar" size="mini"></u-avatar>
					<text class="nickname u-margin-left-20">{{item.nickname}}</text>
				</view>
				<!--帖子内容-->
				<view class="topic-item-content u-margin-top-20" @tap="jump('/pages/topic/topic', { id: item.id })">
					<rich-text class="post-text" :nodes="item.text"></rich-text>
					<!--1张图-->
					<view class="u-margin-top-30" v-if="item.images.length == 1">
						<image :lazy-load="true" mode="aspectFill" :src="item.images[0]" class="img-style-1"
							@tap.stop="previewImage(item.images[0],item.images)">
						</image>
					</view>
					<!--2张图-->
					<view v-if="item.images.length == 2">
						<view class="img-style-2">
							<image :lazy-load="true" v-for="(mediaItem, index2) in item.images" :key="index2"
								mode="aspectFill" :src="mediaItem" @tap.stop="previewImage(mediaItem,item.images)">
							</image>
						</view>
		
					</view>
					<!--3张以上-->
					<view v-if="item.images.length > 2">
						<view class="img-style-3">
							<image :lazy-load="true" v-for="(mediaItem, index2) in item.images" :key="index2"
								mode="aspectFill" :src="mediaItem" @tap.stop="previewImage(mediaItem,item.images)">
							</image>
						</view>
					</view>
				</view>
				<!--帖子列表底部-->
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 钱包样式卡片
	 */
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				topicList: [],
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				imgList: [],

			};
		},
		computed: {
			...mapState({
				userInfo: ({
					user
				}) => user.userInfo,
				userData: ({
					user
				}) => user.userData
			})
		},
		created() {
			this.getTopicList();
		},
		methods: {
			getTopicList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('topic.topiclist', {
					pre_page: 10,
					page: that.currentPage
				}).then(res => {
					if (res.code === 1) {
						that.total = res.data.total;
						that.topicList = [...that.topicList, ...res.data];
						that.lastPage = res.data.last_page;
						if (that.currentPage < res.data.last_page) {
							that.loadStatus = 'loadmore';
						} else {
							that.loadStatus = 'nomore';
						}
					}
				});
			},
			// 加载更多
			loadMore() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getTopicList();
				}
			},
			previewImage(url, urls) {
				uni.previewImage({
					current: url, // 当前显示图片的http链接
					urls: urls // 需要预览的图片http链接列表
				})
			},
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			}
		}
	};
</script>

<style lang="scss">
.topic-item {
	width: 100%;
	height: auto;
	line-height: 1.5em;
	background: #FFFFFF;
	margin-bottom: 10rpx;
	overflow: hidden;
	padding-bottom: 20rpx;
    .topic-item-content {
		.img-style-1 {
			display: block;
			width: 100%;
			max-height: 600rpx;
			border-radius: 5px;
			overflow: hidden;
		}
		.img-style-2 {
			display: flex;
            image {
			  margin: 5rpx;
			  border-radius: 5px;
			  width: 100%;
			  height: 294rpx;
			}
		}
		.img-style-3 {
			display: flex;
			flex-wrap: wrap;
			image {
				width: 31.3%;
				height: 200rpx;
				margin: 1%;
				border-radius: 5px;
			}
			
		}
		
	}
}
</style>

